<template>
	<view class="activity-page">
		<!-- 顶部栏 -->
		<!-- <top-bar title="活动详情" @click="goBack"></top-bar> -->

		<!-- Activity banner -->
		<image class="activity-banner" src="/static/活动详情页面图片/活动详情1.png" mode="aspectFill"></image>

		<!-- Activity Info Section -->
		<view class="background-image">
			<view class="activity-info">
				<view class="activity-time">开始时间：{{ formatMessageTime(curactivity.sendTime) }}</view>
				<view class="activity-time">结束时间：{{ formatMessageTime(curactivity.expireTime) }}</view>
				<view class="subsidy-info">
					<span class="currency-symbol">¥</span>
					<span class="subsidy-amount">{{curactivity.subsidy}}</span>
					<span class="subsidy-description">优惠，全平台通用</span>
					<!-- Countdown Section -->
					<view class="countdown-section">
						<text class="countdown-label">优惠券剩余时间：</text>
						<text class="countdown-time">{{ remainingTime }}</text>
					</view>
				</view>
				<button class="join-button" @click="getCounpon()">立即抢购</button>
			</view>

			<!-- Activity Content Section -->
			<view class="activity-content">
				<text class="content-title">活动标题:</text>
				<text class="content-description">{{curactivity.title}}</text>
			</view>

			<!-- Activity Rules Section -->
			<view class="activity-rules">
				<text class="rules-title">优惠券介绍:</text>
				<text class="rules-content">{{curactivity.introduce}}</text>
			</view>

			

			<!-- Rewards Section -->
			<view class="rewards-section">
				<button class="claim-button">查看抢购情况</button>
			</view>
		</view>
	</view>
</template>

<script>
import topBar from '@/components/top-bar/top-bar.vue';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 引入中文语言包
dayjs.locale('zh-cn'); // 设置 dayjs 使用中文语言包

export default {
	data() {
		return {
			curactivity: null,
			remainingTime: '',
			token:null
		};
	},
	components: {
		topBar
	},
	onLoad() {
		this.curactivity = JSON.parse(this.$route.query.activity);
	},
	created() {
		this.updateCountdown(); // 页面创建时立即更新倒计时
		setInterval(() => {
			this.updateCountdown(); // 每秒更新一次倒计时
		}, 1000);
	},
	methods: {
		goBack() {
			this.curactivity = null;
			uni.navigateTo({
				url: '/pages/activities/activities',
				success: (res) => {}
			});
		},
		formatMessageTime(time) {
			return dayjs(time).format('YYYY-MM-DD HH:mm'); // 只显示日期，不显示星期几
		},
		updateCountdown() {
			if (this.curactivity && this.curactivity.expireTime) {
				const currentTime = dayjs();
				const expireTime = dayjs(this.curactivity.expireTime);
				const diffInMs = expireTime.diff(currentTime); // 计算剩余毫秒数
				if (diffInMs > 0) {
					const hours = Math.floor(diffInMs / (1000 * 60 * 60));
					const minutes = Math.floor((diffInMs % (1000 * 60 * 60)) / (1000 * 60));
					const seconds = Math.floor((diffInMs % (1000 * 60)) / 1000);
					this.remainingTime = `${hours}小时 ${minutes}分钟 ${seconds}秒`;
				} else {
					this.remainingTime = "优惠券已过期";
				}
			} else {
				this.remainingTime = "优惠券已过期";
			}
		},
		
		//优惠劝抢购
		getCounpon(){
			
			this.token=uni.getStorageSync('login-user').token;
			uni.request({
				url:'http://localhost:8086/business/user/chatContent/mySellers?userid=',
				method:'GET',
				
				header:{
					"token":this.token,
				},
				success:(res)=>{
					console.log(res.data.data);
					this.friendList=res.data.data;
				},
				fail(){
					alert("请求出错")
					
				},
			})
			
			
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../src/assets/scss/活动详情/acativityDetail.scss';
.currency-symbol {
	font-size: 20px;
	color: #FFA500;
	font-size: 80px;
}
.subsidy-amount {
	font-size: 80px;
	font-weight: bold;
	color: #FFA500;
}
.subsidy-description {
	font-size: 30px;
	// color: #666;
}
.countdown-section {
	margin-top: 20px;
	display: flex;
	align-items: center;
	.countdown-label {
		font-size: 16px;
		
	}
	.countdown-time {
		font-size: 20px;
		font-weight: bold;
		
		margin-left: 10px;
	}
}
</style>